import React, {PureComponent} from 'react'
import Info from './info'
import Pie from '../chart/base-pie'
import '../../../css/device.scss'
class Device extends PureComponent {

    render() {
        const {data, currentSingleBoard, pieData} = this.props

        pieData.startAngle = 180
        const colors = {
            on: {
                color: '#00B797',
                text: '正常'
            },
            error: {
                color: '#D23F49',
                text: '故障'
            },
            off: {
                color: '#E7DB79',
                text: '关机'
            }
        }

        return (
            <div>
                <div className="full-container">
                    <div className="device-info">
                        <Info src={this.props.src} data={data}/>
                    </div>
                    <div className="clearfix"/>
                    <div className="device-stat">
                        <div className="device-info-stat clearfix">
                            <div className="device-info-stat-text">
                                <span>当前状态</span>
                                <span
                                    style={{color: (colors[data.status] || {}).color}}>{(colors[data.status] || {}).text}</span>
                            </div>
                        </div>
                        <div className="device-pie-container">
                            <Pie config={pieData}/>
                        </div>
                        <div className="device-info-stat clearfix">
                            <div className="device-current-info">
                                <p>当前加工板信息</p>
                                {Object.keys(currentSingleBoard || {}).map(key => {
                                    return <div className="device-current-text">
                                        <span>{key}</span>
                                        {currentSingleBoard[key]}
                                    </div>
                                })}
                            </div>
                        </div>
                    </div>
                    {this.props.children}
                </div>
            </div>
        )
    }

}

export default Device